<template>
  <div class="switch-language">
    <span>语言： <b>{{ language }}</b></span>

    <button @click="switchLanguage">切换语言</button>
  </div>

  <!-- 绑定 key 用于 语言切换后重载 editor  -->
  <t-editor
    :key="language"
    v-model="content"
    :content-style="{
      minHeight: '500px'
    }"
    :config="{
      language
    }"
  />
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    data() {
      return {
        content: '',
        language: localStorage.language || process.env.VUE_APP_DEFAUL_LANGUAGET
      }
    },
    methods: {
      switchLanguage() {
        this.language = this.language === 'en' ? process.env.VUE_APP_DEFAUL_LANGUAGET : 'en'
        localStorage.language = this.language
      }
    }
  })
</script>

<style lang="less" scoped>
  .switch-language {
    padding: 10px;
    text-align: right;

    button {
      margin-left: 10px;
    }
  }
</style>
